<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import { SmileOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { reactive, ref, toRaw, inject, watch ,getCurrentInstance} from 'vue';
import { Form } from 'ant-design-vue';
import { menuEdit, menuAdd} from "@/apis/systemManaging/menu"
const { Bus } = getCurrentInstance().appContext.config.globalProperties;
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();
const RoleTypeOptionsEnum = [
    {
        label: "后台",
        value: "admin",

    },
    {
        label: "OA",
        value: "oa",
    },
    {
        label: "CRM",
        value: "crm",

    },
]
const formState = reactive({
    id: "",
    name: "",
    path: "",
    parentId: "",
    sort: "",
    type: "",
    component: "",
    permission: "",
    icon: "",
    redirect: "",
    status: "",
})
const roleList = inject("getList")
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur', }],
        path: [{ required: true, message: '请输入菜单路由', trigger: 'blur', }],
        component: [{ required: true, message: '请输入组件路径', trigger: 'blur', }],
        type: [{ required: true, message: '请输入组件路径', trigger: 'blur', }]
    }),
);
defineProps({
    list: {
        type: Array,
        required: true,
    }
})
const emit = defineEmits(['getList'])
watch(() => open.value, () => {
    if (!open.value) {
        for (const key in formState) {
            formState[key] = "";
        };
    }
})
const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            craeteEdit()
        })
        .catch(error => {
            console.log('error', error);
        });
};
const handleOk = (options) => {
    validate()
        .then(async res => {
            open.value = false;
            if (formState.id) {
                let delRes = await menuEdit(formState);
                if (delRes.code === 200) {
                    message.success(delRes.msg);
                } else {
                    message.error(delRes.msg);
                }
            } else {
                RoleOperate();
            }
            setTimeout(() => {
                emit('getList')
                Bus.emit('changeNav')
            },200)
        })
        .catch(err => {
            console.log('error', err);
        });
}
const handleCancel = () => {
    open.value = false
}
const RoleOperate = async () => {
    let res = await menuAdd(formState);
    if (res.code === 200) {
        // roleList();
    } else {
        message.error(res.msg);
    }
}
defineExpose({ open, formState })

</script>
<template>
    <modal-box title="创建菜单" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="700px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="上级目录" v-bind="validateInfos.parentId">
                        <a-tree-select v-if="list" v-model:value="formState.parentId" show-search style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择"
                            :fieldNames="{ children: 'children', label: 'name', value: 'id' }" allow-clear
                            tree-default-expand-all :tree-data="list" tree-node-filter-prop="label">
                            <template #title="{ id, name }">
                                {{ name }}
                            </template>
                        </a-tree-select>

                    </a-form-item>
                    <a-form-item label="菜单名称" v-bind="validateInfos.name">
                        <a-input v-model:value="formState.name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="菜单路由" v-bind="validateInfos.path">
                        <a-input v-model:value="formState.path" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="组件路径" v-bind="validateInfos.component">
                        <a-input v-model:value="formState.component" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="显示排序" v-bind="validateInfos.sort">
                        <a-input-number v-model:value="formState.sort" :min="0" />
                    </a-form-item>
                    <a-form-item label="菜单图标" v-bind="validateInfos.icon">
                        <a-input v-model:value="formState.icon" placeholder="请输入" :disabled="true" />
                    </a-form-item>
                    <a-form-item label="菜单类型" v-bind="validateInfos.type">
                        <a-select v-model:value="formState.type" :allowClear="true" placeholder="请选择">
                            <a-select-option :value="1">菜单</a-select-option>
                            <a-select-option :value="2">页面</a-select-option>
                            <a-select-option :value="3">按钮</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="使用状态" v-bind="validateInfos.is_admin">
                        <a-select v-model:value="formState.is_admin" :allowClear="true" placeholder="请选择">
                            <a-select-option :value="0">否</a-select-option>
                            <a-select-option :value="1">是</a-select-option>
                        </a-select>
                    </a-form-item>
                    <!-- <a-form-item ref="name" label="角色描述">
                        <a-textarea v-model:value="formState.description" placeholder="请填写角色描述" :rows="4" />
                    </a-form-item> -->
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

:deep(.ant-form-item) {
    width: 100%;
    margin-right: 10px;

    // &:nth-child(2n) {
    //     margin-right: 0;
    // }
}

:deep(.ant-input-number) {
    width: 100%;
}

:deep(.ant-form-item-label) {
    width: 110px;
}
</style>